<template>
  <div class="login-view">
    <header class="header">
      <img class="logo" :src="getAssetsFile(logoName)" />
    </header>
    <div class="login-view-wapper">
      <div class="login-slogan-view">
        <p class="slogan"><span>welcome!</span></p>
        <p class="slogan-sub">
          <span>{{ getConfigForKey('logo_slogan') || '欢迎来到华润电力AI助手' }}</span>
        </p>
      </div>
      <div class="login-page">
        <div class="login-page-container">
          <div class="title"><p>欢迎登录</p></div>
          <div class="form">
            <el-form :model="form" :rules="rules" ref="formRef" label-width="0px">
              <el-form-item class="form-item" size="large" prop="username">
                <el-input
                  clearable
                  :prefix-icon="IconLoginUser"
                  v-model="form.username"
                  placeholder="请输入用户名"
                ></el-input>
              </el-form-item>
              <el-form-item class="form-item" size="large" prop="password">
                <el-input
                  :type="passwordVisible ? 'text' : 'password'"
                  :prefix-icon="IconLoginLock"
                  v-model="form.password"
                  clearable
                  placeholder="请输入密码"
                >
                  <template #append>
                    <i class="el-icon-view eye-icon" @click="togglePasswordVisibility">
                      <IconLoginEyeClose v-if="!passwordVisible" />
                      <IconLoginEyeOpen v-if="passwordVisible" />
                    </i> </template
                ></el-input>
              </el-form-item>
              <el-form-item class="form-item" size="large" prop="code">
                <div class="code-input">
                  <el-input
                    :prefix-icon="IconLoginSafe"
                    v-model="form.code"
                    clearable
                    placeholder="请输入验证码"
                  ></el-input
                  ><img class="code" :src="codeBase64Image" @click="refreshLoginCode" />
                </div>
              </el-form-item>
            </el-form>
            <el-button :loading="loggining" class="login-button" @click="loginClick(formRef)"
              >登录</el-button
            >
          </div>
          <div class="memo">
            <div class="agreement">
              <el-checkbox v-model="checkedAgreement" label="已阅读并同意"></el-checkbox>
              <el-botton class="hight-light-btn" text>《用户协议》</el-botton><span>和</span
              ><el-botton class="hight-light-btn" text>《隐私政策》</el-botton>
            </div>
            <div class="forget-password"><el-botton text>忘记密码</el-botton></div>
          </div>
        </div>
      </div>
    </div>
    <footer class="footer">
      <p class="support"><span>技术支持 · 华润数科</span></p>
      <p class="copyright"><span>Copyright @ 华润（集团）有限公司 京ICP备05045648号</span></p>
    </footer>
  </div>
</template>

<script setup lang="ts">
import { ElMessage, FormRules, RuleForm, FormInstance } from 'element-plus'
import IconLoginLock from '../components/icons/IconLoginLock.vue'
import IconLoginUser from '../components/icons/IconLoginUser.vue'
import IconLoginSafe from '../components/icons/IconLoginSafe.vue'
import IconLoginEyeClose from '../components/icons/IconLoginEyeClose.vue'
import IconLoginEyeOpen from '../components/icons/IconLoginEyeOpen.vue'
import { reactive, ref } from 'vue'
import { getLoginCode } from '../utils/api'
import authMgr from '../utils/auth'
import router from '@/router/index'
import { getConfigForKey, homeLogoPath } from '../utils/config'
import getAssetsFile from '../utils/pub-use'

const logoName: string = ref(homeLogoPath)
// const form = ref({ username: 'admin', password: 'xrq0KWG-evq6ufa@gdh', code: '' })
const form = ref({ username: '', password: '', code: '' })
const checkedAgreement = ref(false)

const formRef = ref<FormInstance>()
const rules = reactive<FormRules<RuleForm>>({
  username: [{ required: true, message: '请填写用户名', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'change' }],
  code: [{ required: true, message: '请输入验证码', trigger: 'change' }]
})

const passwordVisible = ref(false)
const loggining = ref(false)

let codeKey = ref('')
let codeBase64Image = ref('')

const refreshLoginCode = () => {
  getLoginCode().then((data) => {
    codeKey.value = data.key
    codeBase64Image.value = `data:image/png;base64,${data.image}`
    // console.log('login code:', codeBase64Image.value, data)
  })
}

refreshLoginCode()

const togglePasswordVisibility = () => {
  passwordVisible.value = !passwordVisible.value
}

const loginClick = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  console.log(formEl)

  await formEl.validate((valid, fields) => {
    if (valid) {
      if (!checkedAgreement.value) {
        ElMessage.error('请先阅读并同意用户协议和隐私政策')
        return
      }
      login()
    } else {
      console.log('error submit!', fields)
    }
  })
}

const login = () => {
  loggining.value = true

  authMgr
    .login(form.value.username, form.value.password, codeKey.value, form.value.code)
    .then((result) => {
      console.log(result)
      loggining.value = false
      router.push('/')
    })
    .catch((err) => {
      ElMessage.error(err.message)
      refreshLoginCode()
      loggining.value = false
    })
}
</script>

<style lang="scss" scoped>
.login-view {
  height: 100%;
  background-image: url('@/assets/img/login-bg.png');
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;

  .header {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
  }

  .logo {
    height: 50px;
    margin-left: var(--crp-margin-extra-large);
    margin-top: var(--crp-margin-base);
  }

  .login-view-wapper {
    height: 58%;
    width: 65%;

    min-width: 800px;
    min-height: 460px;

    max-width: 1200px;
    max-height: 616px;

    background: var(--crp-bg-color);
    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.1);
    border-radius: 8px;

    display: flex;
    flex-direction: row;

    .login-slogan-view {
      width: 50%;
      height: 100%;

      padding: var(--crp-margin-large) 40px;

      background-image: url('@/assets/img/login-slogan-bg.png');
      background-size: cover;

      .slogan {
        height: 68px;
        font-size: 48px;
        color: #ffffff;
        line-height: 55px;
        text-align: left;
        font-style: normal;
      }

      .slogan-sub {
        height: 28px;
        font-weight: 400;
        font-size: var(--crp-font-size-extra-large);
        color: #ffffff;
        line-height: 28px;
        text-align: justify;
        font-style: normal;
      }
    }

    .login-page {
      width: 50%;
      height: 100%;
      min-width: 500px;
      display: flex;
      justify-content: center;
      align-items: center;

      .login-page-container {
        width: 70%;
        padding-bottom: 36px;

        .title {
          height: 48px;
          margin-bottom: 42px;

          p {
            font-weight: 600;
            font-size: 32px;
            color: var(--crp-text-color-importan);
            line-height: 48px;
            text-align: center;
            font-style: normal;
          }
        }

        .form {
          :deep(.el-input--large) {
            --el-component-size-larg: 46px;
            --el-input-height: var(--el-component-size-large);
            font-size: 16px;
            height: 48px;
            line-height: 48px;
          }

          :deep(.el-form-item--large) {
            margin-bottom: var(--crp-margin-large);
          }

          :deep(.el-input__icon) {
            font-size: var(--crp-font-size-large);
            color: var(--crp-icon-color-secondary);
          }
          .eye-icon {
            font-size: var(--crp-font-size-medium);
            color: var(-crp-text-color-placeholder);
            cursor: pointer;
          }

          :deep(.el-input-group__append) {
            padding-top: 8px;
            background-color: transparent;
            border-left-color: transparent;
          }
          :deep(.el-input__wrapper){
            border: 1px solid var(--crp-border-color);
            box-shadow: none
          }

          .form-item {
            height: 48px;
          }

          .code-input {
            display: flex;
            flex-direction: row;
            width: 100%;
          }

          .login-button {
            width: 100%;
            height: 48px;
            background: radial-gradient(13% 47% at 54% 100%, #d565ff 0%, rgba(128, 88, 255, 0) 100%),
              #8059ff;
            border-radius: 8px;

            font-weight: 500;
            font-size: 18px;
            color: #ffffff;
            line-height: 25px;

            margin-bottom: var(--crp-margin-base);
          }

          .code {
            width: 120px;
            height: 48px;
            margin-left: var(--crp-margin-medium);
            cursor: pointer;
          }
        }

        .memo {
          display: flex;
          justify-content: space-between;
          align-items: center;
          flex-direction: row;

          .agreement {
            display: flex;
            align-items: center;
            font-weight: 400;
            font-size: var(--crp-font-size-base);
            color: var(--crp-text-color-secondary);

            :deep(.el-checkbox) {
              height: 16px;
              margin-right: var(--crp-margin-small);
            }

            .hight-light-btn {
              cursor: pointer;
              color: var(--crp-colors-primary-base);
            }
            :deep(.el-checkbox__input.is-checked+.el-checkbox__label){
              color: var(--crp-text-color-secondary);
            }
          }

          .forget-password {
            height: 22px;
            font-weight: 400;
            font-size: var(--crp-font-size-base);
            color: var(--crp-text-color-primary);
            line-height: 22px;
          }
        }
      }

      @media (max-width: 1024px) {
        .login-page-container {
          padding: var(--crp-padding-extra-large);
        }
      }
    }
  }

  // @media (max-width: 1024px) {
  //   .login-view-wapper {
  //     height: 410px;
  //     width: 800px;
  //   }
  // }

  .footer {
    height: 68px;

    .support {
      height: 20px;
      font-weight: 400;
      font-size: var(--crp-font-size-base);
      color: var(--crp-text-color-primary);
      line-height: 20px;
      text-align: center;
      font-style: normal;
    }

    .copyright {
      font-weight: 400;
      font-size: var(--crp-font-size-extra-small);
      color: var(--crp-text-color-placeholder);
      line-height: 48px;
      text-align: left;
      font-style: normal;
    }
  }
}
</style>
